<template>
	<view class="container">
		<u-navbar @leftClick="leftClick" @rightClick="inputDialogToggle" bgColor="#f5f5f5" placeholder
			:safeAreaInsetTop="true" title="渠道列表" :fixed="true" rightIcon="plus">
		</u-navbar>
		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item, index) in swipeList" :key="item.value" :right-options="options"
				@click="handleClick($event, item)">
				<view class="list-item">
					<view class="item-title">
						{{ item.text }}
					</view>
					<uni-icons type="left" size="26" color="#dcdcdc"></uni-icons>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 输入对话框 -->
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog mode="input" title="输入渠道名称" :value="popupvalue" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 修改框示例 -->
		<uni-popup ref="modifyDialog" type="dialog">
			<uni-popup-dialog mode="input" title="输入渠道名称" :value="popupvalue" placeholder="请输入内容"
				@confirm="dialogInputmodify"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aaa:'',
				popupvalue: '',
				swipeList: [],
				options: [{
						text: '修改',
						style: {
							color: '#000000',
							backgroundColor: '#ffc107'
						}
					},
					{
						text: '删除',
						style: {
							color: '#fff',
							backgroundColor: '#dc3545'
						}
					}
				],
				urlAlphabet: 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict',
				dataID:''
			}
		},
		onLoad() {
			this.swipeList = this.vuex_qudao
		},
		methods: {
			// 添加渠道
			inputDialogToggle() {
				this.popupvalue = ''
				this.$refs.inputDialog.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				if(val == ''){
					uni.showToast({
					  title: '未填写渠道',
					  icon: 'none',
					  duration: 1500
					});
					return
				}
				if(this.checkIfTextExists(this.swipeList,val)){
					uni.showToast({
					  title: '已创建此渠道',
					  icon: 'none',
					  duration: 1500
					});
					return
				}
				let obj = {}
				obj.value = this.nanoid()
				obj.text = val

				let datalist = []
				datalist = this.vuex_qudao
				datalist.unshift(obj)
				uni.$u.vuex('vuex_qudao', datalist)
			},
			// 修改渠道
			dialogInputmodify(e){
				if(e == ''){
					uni.showToast({
					  title: '未填写渠道',
					  icon: 'none',
					  duration: 1500
					});
					return
				}
				if(this.checkIfTextExists(this.swipeList,e)){
					uni.showToast({
					  title: '已创建此渠道',
					  icon: 'none',
					  duration: 1500
					});
					return
				}
				let obj = {}
				obj.text = e
				uni.$u.vuex('vuex_qudao', this.updateItemById(this.swipeList,this.dataID,obj))
				this.swipeList = []
				setTimeout(()=>{
					this.swipeList = this.vuex_qudao
				},100)
			},
			// 删除渠道
			deleteTheChannel(id) {
				uni.showLoading({
					title: '删除中...',
					mask:true
				});
				setTimeout( ()=> {
					uni.hideLoading();
				}, 1200);
				
				uni.$u.vuex('vuex_qudao', this.deleteItemById(this.swipeList,id))
				// 处理闸门
				setTimeout(()=>{
					uni.$u.vuex('vuex_initPosiVX', this.clearSpecificField(this.vuex_initPosiVX,'channel',id))
				},500)
			},
			// 滑动
			handleClick(e, item) {
				const {
					content
				} = e
				switch (content.text) {
					case '修改':
					this.dataID = item.value
					this.popupvalue = item.text
						this.$refs.modifyDialog.open()
						// 这里可以跳转到编辑页面或弹出编辑对话框
						break
					case '删除':
						uni.showModal({
							title: '提示',
							content: '确定要删除此项吗？',
							success: (res) => {
								if (res.confirm) {
									this.deleteTheChannel(item.value)
								}
							}
						})
						break
				}
			},
			// 返回
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 生Id
			nanoid(size = 21) {
				let id = ''
				let i = size
				while (i--) {
					id += this.urlAlphabet[(Math.random() * 64) | 0]
				}
				return id
			},
			// 删除ID
			deleteItemById(arr, id) {
			  const index = arr.findIndex(item => item.value === id);
			    if (index !== -1) {
			      arr.splice(index, 1);
			    }
			    return arr;
			},
			// 修改数组
			updateItemById(arr, id, newData, returnNewArray = false) {
			  // 方法1: 直接修改原数组（适合Vue响应式数据）
			  if (!returnNewArray) {
			    const index = arr.findIndex(item => item.value === id);
			    if (index !== -1) {
			      arr[index] = {...arr[index], ...newData};
			    }
			    return arr;
			  }
			  
			  // 方法2: 返回新数组（不修改原数组）
			  return arr.map(item => {
			    if (item.value === id) {
			      return {...item, ...newData};
			    }
			    return item;
			  });
			},
			// 验证是否存在
			checkIfTextExists(arr, value, field = 'text') {
			  // 检查数组是否有效
			  if (!Array.isArray(arr)) {
			    console.error('第一个参数必须是数组');
			    return false;
			  }
			  
			  // 检查值是否已存在
			  const exists = arr.some(item => {
			    // 确保对象有指定的属性
			    return item && item[field] && item[field].toString().trim() === value.toString().trim();
			  });
			  
			  if (exists) {
			    return true;
			  }
			  
			  return false;
			},
			// 只清空指定的字段（如 channel），其他字段保持不变
			clearSpecificField(arr, field, targetValue) {
			  // 参数检查
			  if (!Array.isArray(arr)) {
			    console.error('第一个参数必须是数组');
			    return arr || [];
			  }
			
			  if (typeof field !== 'string' || field.trim() === '') {
			    console.error('第二个参数必须是有效的字段名');
			    return arr;
			  }
			
			  // 遍历数组
			  arr.forEach(item => {
			    // 检查是否为有效对象且包含目标字段
			    if (item && typeof item === 'object' && field in item) {
			      // 比较字段值（类型不敏感）
			      if (item[field] != null && item[field].toString() === targetValue.toString()) {
			        // 仅清空目标字段
			        item[field] = ''; 
			      }
			    }
			  });
			
			  return arr;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;

		.item-title {
			display: block;
			font-size: 40rpx;
			color: #35a39f;
			margin-bottom: 10rpx;
		}

		.item-content {
			display: block;
			font-size: 28rpx;
			color: #999;
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>